/* 公共样式 */
page {
	height: 100%;
	display: flex;
	font-size: 36upx;
}

.width-auto {
	flex: 0 0 auto;
	width: auto;
}

.width-a100 {
	flex: 1 1 100%;
}

.width-f100 {
	flex: 0 0 100%;
}

.height-auto {
	flex: 0 0 auto;
	height: auto;
}

.height-a100 {
	flex: 1 1 100%;
}

.content {
	display: flex;
	flex: 1;
	flex-direction: column;
	background-color: #efeff4;
	padding: 20upx;
	height: 100%;
}

.input-group {
	background-color: #ffffff;
	margin-top: 40upx;
	position: relative;
}

.input-group::before {
	position: absolute;
	right: 0;
	top: 0;
	left: 0;
	height: 1upx;
	content: '';
	-webkit-transform: scaleY(.5);
	transform: scaleY(.5);
	background-color: #c8c7cc;
}

.input-group::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1upx;
	content: '';
	-webkit-transform: scaleY(.5);
	transform: scaleY(.5);
	background-color: #c8c7cc;
}

.input-row {
	display: flex;
	flex-direction: row;
	position: relative;
}

.input-row .title {
	width: 20%;
	height: 50upx;
	min-height: 50upx;
	padding: 15upx 0;
	padding-left: 30upx;
	line-height: 50upx;
}

.input-row input {
	width: 80%;
	height: 50upx;
	min-height: 50upx;
	padding: 15upx 0;
	padding-right: 30upx;
	line-height: 50upx;
}

.input-row.border::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 15upx;
	height: 1upx;
	content: '';
	-webkit-transform: scaleY(.5);
	transform: scaleY(.5);
	background-color: #c8c7cc;
}

.btn-row {
	/* margin-top: 50upx; */
	padding: 20upx;
}

button.primary {
	background-color: #0faeff;
}

checkbox,
radio {
	margin-right: 10upx;
}

button {
	margin-top: 20upx;
	margin-bottom: 20upx;
	font-size: 38upx;
}

form {
	width: 100%;
}

.no-before:before {
	height: 0 !important;
}

.container {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	justify-content: space-between;
	font-size: 32upx;
	font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
}

.page-head {
	padding: 60upx 50upx 80upx;
	text-align: center;
	line-height: initial;
	height: 60upx;
}

.page-head-title {
	display: inline-block;
	padding: 0 40upx;
	font-size: 30upx;
	height: 60upx;
	line-height: 60upx;
	color: #BEBEBE;
	box-sizing: border-box;
	border-bottom: 2upx solid #D8D8D8;
}

.page-head-desc {
	padding-top: 20upx;
	color: #9B9B9B;
	font-size: 32upx;
}

.page-body {
	width: 100%;
	flex-grow: 1;
	overflow-x: hidden;
}

.page-body-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.page-body-wording {
	text-align: center;
	padding: 200upx 100upx;
}

.page-body-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #fff;
	width: 100%;
	padding: 50upx 0 150upx 0;
}

.page-body-title {
	margin-bottom: 100upx;
	font-size: 32upx;
}

.page-body-text {
	font-size: 30upx;
	line-height: 52upx;
	color: #ccc;
}

.page-body-text-small {
	font-size: 24upx;
	color: #000;
	margin-bottom: 100upx;
}

.page-foot {
	margin: 100upx 0 30upx 0;
	text-align: center;
	color: #1aad19;
	font-size: 0;
}

.icon-foot {
	width: 152upx;
	height: 23upx;
}

.page-section {
	width: 100%;
	margin-bottom: 60upx;
}

.page-section_center {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.page-section:last-child {
	margin-bottom: 0;
}

.page-section-gap {
	box-sizing: border-box;
	padding: 0 30upx;
}

.page-section-spacing {
	box-sizing: border-box;
	padding: 0 80upx;
}

.page-section-title {
	font-size: 28upx;
	color: #999999;
	margin-top: 10upx;
	margin-bottom: 10upx;
	padding-left: 30upx;
	padding-right: 30upx;
}

.page-section-gap .page-section-title {
	padding-left: 0;
	padding-right: 0;
}

/* example */

.index-hd {
	padding: 90upx;
	text-align: center;
}

.index-logo {
	width: 140upx;
	height: 140upx;
}

.btn-area {
	margin-top: 60upx;
	box-sizing: border-box;
	width: 100%;
	padding: 0 30upx;
}

.image-plus {
	width: 150upx;
	height: 150upx;
	border: 2upx solid #D9D9D9;
	position: relative;
}

.image-plus-nb {
	border: 0;
}

.image-plus-text {
	color: #888888;
	font-size: 28upx;
}

.image-plus-horizontal {
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: #d9d9d9;
	width: 4upx;
	height: 80upx;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}

.image-plus-vertical {
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: #d9d9d9;
	width: 80upx;
	height: 4upx;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}

.color1 {
	background-color: #1AAD19;
	color: #FFFFFF;
}

.color2 {
	background-color: #2782D7;
	color: #FFFFFF;
}

.color3 {
	background-color: #F1F1F1;
	color: #353535;
}

.press-tips {
	font-size: 30upx;
	padding: 15upx;
	color: #444;
}

.arrow-box {
	width: 40upx;
	height: 30upx;
	margin-right: 20upx;
	position: relative;
}

/*下箭头*/
.bottom {
	width: 40upx;
	height: 30upx;
	position: absolute;
	left: 0;
	top: 0;
	border: 0;
}

.bottom-arrow1,
.bottom-arrow2 {
	width: 0;
	height: 0;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	border-bottom: 10upx transparent dashed;
	border-left: 20upx transparent dashed;
	border-right: 20upx transparent dashed;
	border-top: 10upx #F8F8F8 solid;
	overflow: hidden;
}

.bottom-arrow1 {
	top: 3upx;
	/*重要*/
	border-top: 20upx blue solid;
}

.bottom-arrow2 {
	border-top: 20upx #F8F8F8 solid;
}
